<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="Apache Forrest" name="Generator">
<meta name="Forrest-version" content="0.8">
<meta name="Forrest-skin-name" content="pelt">
<title>Architecture overview</title>
<link type="text/css" href="../skin/basic.css" rel="stylesheet">
<link media="screen" type="text/css" href="../skin/screen.css" rel="stylesheet">
<link media="print" type="text/css" href="../skin/print.css" rel="stylesheet">
<link type="text/css" href="../skin/profile.css" rel="stylesheet">
<script src="../skin/getBlank.js" language="javascript" type="text/javascript"></script><script src="../skin/getMenu.js" language="javascript" type="text/javascript"></script><script src="../skin/fontsize.js" language="javascript" type="text/javascript"></script>
<link rel="shortcut icon" href="../">
</head>
<body onload="init()">
<script type="text/javascript">ndeSetTextSize();</script>
<div id="top">
<!--+
    |breadtrail
    +-->
<div class="breadtrail">
<a href="http://www.apache.org/">apache</a> &gt; <a href="http://xml.apache.org/">xml</a> &gt; <a href="http://xmlgraphics.apache.org/">graphics</a><script src="../skin/breadcrumbs.js" language="JavaScript" type="text/javascript"></script>
</div>
<!--+
    |header
    +-->
<div class="header">
<!--+
    |start group logo
    +-->
<div class="grouplogo">
<a href="http://xmlgraphics.apache.org/"><img class="logoImage" alt="Apache XML Graphics" src="../images/group-logo.png" title="Apache XML Graphics"></a>
</div>
<!--+
    |end group logo
    +-->
<!--+
    |start Project Logo
    +-->
<div class="projectlogoA1">
<a href="http://xmlgraphics.apache.org/batik/"><img class="logoImage" alt="Apache Batik" src="../images/batik.png" title="Apache Batik"></a>
</div>
<!--+
    |end Project Logo
    +-->
<!--+
    |start Tabs
    +-->
<ul id="tabs">
<li>
<a class="unselected" href="../index.html">Home</a>
</li>
<li>
<a class="unselected" href="../tools/index.html">Tools and applications</a>
</li>
<li class="current">
<a class="selected" href="../using/index.html">Using Batik</a>
</li>
<li>
<a class="unselected" href="../dev/index.html">Development</a>
</li>
</ul>
<!--+
    |end Tabs
    +-->
</div>
</div>
<div id="main">
<div id="publishedStrip">
<!--+
    |start Subtabs
    +-->
<div id="level2tabs"></div>
<!--+
    |end Endtabs
    +-->
<script type="text/javascript"><!--
document.write("Last Published: " + document.lastModified);
//  --></script>
</div>
<!--+
    |breadtrail
    +-->
<div class="breadtrail">

             &nbsp;
           </div>
<!--+
    |start Menu, mainarea
    +-->
<!--+
    |start Menu
    +-->
<div id="menu">
<div onclick="SwitchMenu('menu_selected_1.1', '../skin/')" id="menu_selected_1.1Title" class="menutitle" style="background-image: url('../skin/images/chapter_open.gif');">Using Batik</div>
<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
<div class="menuitem">
<a href="../using/index.html">Index</a>
</div>
<div class="menupage">
<div class="menupagetitle">Architecture</div>
</div>
<div class="menuitem">
<a href="../javadoc/">Javadoc APIs</a>
</div>
<div class="menuitem">
<a href="../using/dom-api.html">DOM API</a>
</div>
<div class="menuitem">
<a href="../using/parsers.html">Parsers</a>
</div>
<div onclick="SwitchMenu('menu_1.1.6', '../skin/')" id="menu_1.1.6Title" class="menutitle">Scripting</div>
<div id="menu_1.1.6" class="menuitemgroup">
<div class="menuitem">
<a href="../using/scripting/ecmascript.html">Scripting with ECMAScript</a>
</div>
<div class="menuitem">
<a href="../using/scripting/java.html">Scripting with Java</a>
</div>
<div class="menuitem">
<a href="../using/scripting/security.html">Security</a>
</div>
</div>
<div class="menuitem">
<a href="../using/svg-generator.html">SVG generator</a>
</div>
<div class="menuitem">
<a href="../using/swing.html">Swing components</a>
</div>
<div class="menuitem">
<a href="../using/transcoder.html">Transcoder API</a>
</div>
<div class="menuitem">
<a href="../using/extending.html">Extending Batik</a>
</div>
</div>
<div id="credit"></div>
<div id="roundbottom">
<img style="display: none" class="corner" height="15" width="15" alt="" src="../skin/images/rc-b-l-15-1body-2menu-3menu.png"></div>
<!--+
  |alternative credits
  +-->
<div id="credit2">
<a href="http://eu.apachecon.com/"><img border="0" title="ApacheCon Europe 2008" alt="ApacheCon Europe 2008 - logo" src="http://apache.org/ads/ApacheCon/2008-europe-125x125.png" style="width: 125px;height: 125px;"></a>
</div>
</div>
<!--+
    |end Menu
    +-->
<!--+
    |start content
    +-->
<div id="content">
<h1>Architecture overview</h1>
<div id="minitoc-area">
<ul class="minitoc">
<li>
<a href="#applicationComponents">Application modules</a>
</li>
<li>
<a href="#coreComponents">Core modules</a>
</li>
<li>
<a href="#lowLevelComponents">Low level modules</a>
</li>
</ul>
</div>
    
<p>This document briefly describes the Batik architecture and the role of each of 
      its modules. For detailed module design, you can refer to the 
      Batik UML diagrams <a class="external" href="http://opensource.objectsbydesign.com/batik/index.html">Object by Design</a>
      or <a class="external" href="http://www.yworks.com/products/yDoc/showcase/batik-1.5/">yWorks</a>.</p>
    
<p>The Batik modules are of one of three types:
      application modules, core modules and low level modules.
      The following figure illustrates these three module types.</p>
    
<div class="figure">
<img alt="Batik Architecture" src="images/HighLevelArchitecture.png">
    </div>
    
<p>
<a href="#applicationComponents">Application modules</a> illustrate how to use
      the core modules and let users evaluate the Batik software by experimenting
      with its features.</p>
    
<p>The <a href="#coreComponents">Core modules</a> are the heart of Batik and the primary deliverables for the 
      projects. These are the modules developers use to manipulate, generate, create, 
      convert, render and view SVG content.</p>
    
<p>Finally, the <a href="#lowLevelComponents">Low level modules</a> are used internally by the core modules to 
      accomplish their work. These modules are not typically used by developers directly.</p> 

    
<a name="N1003A"></a><a name="applicationComponents"></a>
<h2 class="boxed">Application modules</h2>
<div class="section">
<p>As mentioned earlier, the application modules illustrate the functionality that Batik
        offers. </p>
<p>For example, the <a href="../tools/browser.html">SVG browser</a> is built using several
        Batik core modules (such as the <span class="codefrag">JSVGCanvas</span> GUI component and the <span class="codefrag">ImageTranscoder</span>s)
        and illustrates how Batik lets you not only view, zoom, pan and rotate SVG documents, but also search them
        and convert them to other formats (such as JPEG, TIFF or PNG).</p>
<p>The <a href="../tools/pretty-printer.html">SVG pretty printer</a> is another example that shows how Batik
        lets you manipulate and transform SVG content, here for the purposed of tidying up potentially
        disorganized SVG files.</p>
<p>The <a href="../tools/font-converter.html">SVG font converter</a> illustrates how Batik can help you embed
        SVG font definitions in an SVG file by providing an application that converts ranges of 
        characters from a TrueType Font format to the SVG font format.</p>
<p>Finally, the <a href="../tools/rasterizer.html">SVG rasterizer</a> shows how to leverage the     
        <a href="../using/transcoder.html">transcoder API</a> to convert to and from SVG content.</p>
<p>
        Note that even though the application modules are meant to be useful and fun to use, they
        are not the primary deliverables of the Batik project. Instead, they are illustrations of how the
        Batik core modules might be used and combined.</p>
</div>

    
<a name="N1006D"></a><a name="coreComponents"></a>
<h2 class="boxed">Core modules</h2>
<div class="section">
<p>The Batik core modules are the heart of the Batik architecture. They can be used individually
        or in combination for various purposes, and the <a href="#applicationComponents">application modules</a>
        offer some usage examples.
      </p>
<ul>
        
<li>The <a href="../using/svg-generator.html">SVG generator</a> is a module containing
          <span class="codefrag">SVGGraphics2D</span>
          class, that lets all Java applications or applets easily convert their
          graphics to the SVG format, as easily as they draw to a screen or a printer, 
          by leveraging the Java 2D API&rsquo;s extensible design.</li>
        
<li>
<a href="../using/dom-api.html">SVG DOM</a> an implementation of the SVG DOM API defined
          in the SVG recommendation. It lets the programmer manipulate SVG documents in a Java program.</li>
        
<li>The <a href="../using/swing.html">Swing components</a> module includes, primarily, the
          <span class="codefrag">JSVGCanvas</span>
          class, a UI component that can display SVG content and let the user
          interact with that content (zoom, pan, rotate, select text, etc.).</li>
        
<li>The <strong>Bridge</strong> module is rarely used directly. It is responsible for creating 
          and maintaining an appropriate object corresponding to an SVG element. The bridge converts an
          SVG document into the internal representation Batik uses for graphics (GVT, the 
          Graphic Vector Toolkit).</li>
        
<li>The <a href="../using/transcoder.html">transcoder</a> is a module that provides a generic API for 
          transcoding an input to an output. This module transcodes an input stream or a document 
          into a particular ouput format, used for converting SVG documents to other types.</li>
      
</ul>
</div>

    
<a name="N100A9"></a><a name="lowLevelComponents"></a>
<h2 class="boxed">Low level modules</h2>
<div class="section">
<p>The low level modules are not expected to be used directly by developers using the Batik
        API. Rather, they support the operation of the core modules. The low level modules
        include:</p>
<ul>
        
<li>The <strong>Graphic Vector Toolkit</strong> (GVT) module, which represents a view of the DOM tree
          that is more suitable for for rendering and event handling purposes. This module describes 
          DOM tree in terms of a tree of Java graphics objects.</li>
        
<li>The <strong>Renderer</strong> module is responsible for rendering a GVT tree and any 
          related task. For example, a raster based renderer may perform
          some caching (the default renderer in Batik does that). However, a renderer could perform
          any task deemed necessary and does not have to be raster based.</li>
        
<li>The <a href="../using/parsers.html">SVG parser</a> module contains parser classes for complex 
          SVG attributes such as the <span class="codefrag">transform</span> or <span class="codefrag">color</span> attributes. Higher level modules 
          rely on the SVG parser module.</li>
      
</ul>
</div>
  
</div>
<!--+
    |end content
    +-->
<div class="clearboth">&nbsp;</div>
</div>
<div id="footer">
<!--+
    |start bottomstrip
    +-->
<div class="lastmodified">
<script type="text/javascript"><!--
document.write("Last Published: " + document.lastModified);
//  --></script>
</div>
<div class="copyright">
        Copyright &copy;
         2000&ndash;2008 <a href="http://www.apache.org/licenses/">The Apache Software Foundation.</a>
</div>
<!--+
    |end bottomstrip
    +-->
</div>
</body>
</html>
